<!--
 * @Author: byron
 * @Date: 2021-10-04 15:34:11
 * @LastEditTime: 2021-10-06 17:06:20
-->
<template>
    <div class="mv" v-if="simiMvs.length">
        <div class="mv-content">
            <div class="left">
                <header>mv详情</header>
                <div id="video" class="player"></div>
                <div class="author-wrap">
                    <div class="avatar">
                        <img v-lazy="$utils.genImgURL(artist.picUrl, 120)" />
                    </div>
                    <p class="author">{{ mvDetail.artistName }}</p>
                </div>
                <p
                    class="name"
                    style="margin-bottom: 16px; font-size: 20px; font-weight: 700"
                >
                    {{ mvDetail.name }}
                </p>

                <div class="desc">
                    <span class="date">发布：{{ mvDetail.publishTime }}</span>
                    <span class="count">播放：{{ mvDetail.playCount }}次</span>
                </div>
            </div>
            <div class="right">
                <header>相关推荐</header>
                <Card
                    v-for="item in simiMvs"
                    :key="item.id"
                    class="card-mv"
                    :name="item.name"
                    :desc="`by ${item.artistName}`"
                    @click="goMv(item.id)"
                >
                    <template #img-warp>
                        <MvCard :img="item.cover" :playCount="item.playCount" />
                    </template>
                </Card>
            </div>
        </div>
    </div>
</template>

<script>
import Player from 'xgplayer'
import { getSimiMv, getMvDetail, getMvUrl, getArtists } from '@/api'
import { mapMutations } from 'vuex'

export default {
    components: {},
    props: ['mvId'],
    data() {
        return {
            simiMvs: [],
            mvDetail: {},
            mvPlayInfo: {},
            artist: {},
            player: null,
        }
    },
    watch: {
        id() {
            this.initData()
        },
    },
    computed: {
        id() {
            if (!this.mvId) return
            return this.mvId
        },
    },
    methods: {
        ...mapMutations('global', ['changeMenu']),
        async initData() {
            const { mvs: data } = await getSimiMv(this.id)
            const { data: mvDetail } = await getMvDetail(this.id)
            const { data: mvPlayInfo } = await getMvUrl(this.id)
            const { artist } = await getArtists(mvDetail.artistId)
            this.mvDetail = mvDetail
            this.mvPlayInfo = mvPlayInfo
            this.simiMvs = data
            this.artist = artist
            this.$nextTick(() => {
                this.setPlay()
            })
        },
        setPlay() {
            this.player = new Player({
                id: 'video',
                url: this.mvPlayInfo.url,
                poster: this.mvDetail.cover,
            })
        },
        goMv(id) {
            this.$router.push(`/mv/${id}`).catch()
        },
    },
    created() {
        this.changeMenu()
        this.initData()
    },
    beforeUpdate() {
        this.player = null
        this.setPlay()
        console.log('组件更新')
    },
    updated() {},
    mounted() {},
    destroyed() {
        this.changeMenu()
    },
}
</script>
<style lang="scss" scoped>
.mv {
    height: 100%;
    padding: 20px;
    .mv-content {
        max-width: 950px;
        margin: auto;
        display: flex;
        header {
            margin-bottom: 16px;
            font-size: 20px;
            font-weight: 700;
        }

        .left {
            flex: 1;
            .player {
                width: 98% !important;
                margin-bottom: 16px;
                overflow: hidden;
                border-radius: 4px;
            }
            .author-wrap {
                margin-bottom: 32px;
                @include flex-center;
                justify-content: start;
                .avatar {
                    @include img-wrap(60px);
                    position: relative;
                    img {
                        @include round(60px);
                    }
                }
                .author {
                    margin-left: 10px;
                    font-size: 20px;
                }
            }
            .desc {
                display: flex;
                color: var(--font-color-grey-shallow);
                .date {
                    margin-right: 10px;
                }
            }
        }
        .right {
            width: 32%;
            padding-left: 32px;
            .card-mv {
                padding: 8px 0px;
            }
        }
    }
}
</style>
